<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- Favicon -->
   <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
   <!-- Typography CSS -->
   <link rel="stylesheet" th:href="@{/css/typography.css}">
   <!-- Style CSS -->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   <!-- Responsive CSS -->
   <link rel="stylesheet" th:href="@{/css/responsive.css}">
   <!-- 引入element样式 -->
   <!--      <link rel="stylesheet" th:href="@{/css/https_unpkg.com_element-ui_lib_theme-chalk_index.css}">-->
</head>
<body>
<!-- loader Start -->
<div id="loading">
   <div id="loading-center">
   </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
   <!-- Sidebar  引入公共列表-->
   <div th:include="public_user::list" class="iq-sidebar"></div>
   <!-- Responsive Breadcrumb End-->
   <!-- Page Content  -->
   <div id="content-page" class="content-page">
      <!-- TOP Nav Bar  引入公共头部-->
      <div th:include="public_user::top" class="iq-top-navbar"></div>
            <!-- TOP Nav Bar END -->
       <div class="container-fluid" id="content">
           <div class="row">
               <div class="col-lg-12">
                   <div class="row">

                       <div class="col-md-12">
                           <div class="iq-card">
                               <div class="iq-card-header d-flex justify-content-between">
                                   <div class="iq-header-title">
                                       <h4 class="card-title">我的发布</h4>
                                   </div>
                               </div>
                               <div class="iq-card-body">
                                   <table class="table mb-0 table-borderless">
                                       <thead>
                                       <tr>
                                           <th scope="col">创建时间</th>
                                           <th scope="col">类型</th>
                                           <th scope="col">名称</th>
                                           <th scope="col">人员需求</th>
                                           <th scope="col">人员招募状态</th>
                                           <th scope="col">完成状态</th>
                                           <th scope="col">操作</th>
                                       </tr>
                                       </thead>
                                       <tbody>
                                       <tr v-for="(vol) in volSend">
                                           <td v-text="myFormatDate(vol.createTime)"></td>
                                           <td v-text="vol.type.typeName"></td>
                                           <td v-text="vol.volName"></td>
                                           <td v-text="vol.userNeed"></td>
                                           <td>
                                               <span v-if="vol.state >= vol.userNeed || vol.state == -1" class="badge badge-success">完成</span>
                                               <span v-if="vol.state < vol.userNeed && vol.state != -1" class="badge badge-warning">未完成</span>
                                           </td>
                                           <td>
                                               <span v-if="vol.state == -1" class="badge badge-success">完成</span>
                                               <span v-if="vol.state != -1" class="badge badge-warning">未完成</span>
                                           </td>
                                           <td>
                                               <button @click="commitVol(vol)" type="button" class="btn iq-bg-primary btn-rounded btn-sm my-0" >确认完成</button>
                                           </td>
                                       </tr>
                                       </tbody>
                                   </table>
                               </div>
                           </div>
                       </div>
                       <div class="col-md-12">
                           <div class="iq-card">
                               <div class="iq-card-header d-flex justify-content-between">
                                   <div class="iq-header-title">
                                       <h4 class="card-title">我的接取</h4>
                                   </div>
                               </div>
                               <div class="iq-card-body">
                                   <table class="table mb-0 table-borderless">
                                       <thead>
                                       <tr>
                                           <th scope="col">时间</th>
                                           <th scope="col">类型</th>
                                           <th scope="col">名称</th>
                                           <th scope="col">发布者</th>
                                           <th scope="col">发布者电话</th>
                                           <th scope="col">状态</th>
                                       </tr>
                                       </thead>
                                       <tbody>
                                       <tr v-for="(userVol) in volGet">
                                           <td v-text="myFormatDate(userVol.vol.createTime)"></td>
                                           <td v-text="userVol.vol.type.typeName"></td>
                                           <td v-text="userVol.vol.volName"></td>
                                           <td v-text="userVol.vol.userInfo.name"></td>
                                           <td v-text="userVol.vol.userInfo.phone"></td>
                                           <td>
                                               <span v-if="userVol.state == 0" class="badge badge-primary">进行中</span>
                                               <span v-if="userVol.state != 0" class="badge badge-success">已完成</span>
                                           </td>

                                       </tr>

                                       </tbody>
                                   </table>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
            <!-- Footer -->
            <footer th:include="public_user::footer" class="bg-white iq-footer"></footer>
            <!-- Footer END -->
         </div>
      </div>
    <!-- Wrapper END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- Appear JavaScript -->
    <script th:src="@{/js/jquery.appear.js}"></script>
    <!-- Countdown JavaScript -->
    <script th:src="@{/js/countdown.min.js}"></script>
    <!-- Counterup JavaScript -->
    <script th:src="@{/js/waypoints.min.js}"></script>
    <script th:src="@{/js/jquery.counterup.min.js}"></script>
    <!-- Wow JavaScript -->
    <script th:src="@{/js/wow.min.js}"></script>
    <!-- Apexcharts JavaScript -->
    <script th:src="@{/js/apexcharts.js}"></script>
    <!-- Slick JavaScript -->
    <script th:src="@{/js/slick.min.js}"></script>
    <!-- Select2 JavaScript -->
    <script th:src="@{/js/select2.min.js}"></script>
    <!-- Owl Carousel JavaScript -->
    <script th:src="@{/js/owl.carousel.min.js}"></script>
    <!-- Magnific Popup JavaScript -->
    <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script th:src="@{/js/smooth-scrollbar.js}"></script>
    <!-- lottie JavaScript -->
    <script th:src="@{/js/lottie.js}"></script>
    <!-- Chart Custom JavaScript -->
    <script th:src="@{/js/chart-custom.js}"></script>
    <!-- Custom JavaScript -->
    <script th:src="@{/js/custom.js}"></script>


    <!--      <script th:src="@{/js/vue.js}"></script>-->
    <!--      &lt;!&ndash; 引入element组件库 &ndash;&gt;-->
    <!--      <script type="module" th:src="@{/js/https_unpkg.com_element-ui_lib_index.js}"></script>-->
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script th:src="@{/js/axio.js}"></script>
    <!-- fixme: 编写时不注掉会导致自动生成大括号时生成错误     -->
    <script th:inline="javascript"> let rootUrl = [[@{/}]]; </script>

    <script>
        new Vue({
            el: "#content",
            data:{
                user:{
                    userInfo:{}
                },
                volSend:{},
                volGet:{}
            },
            mounted(){
                // this.getInfo();
                this.getVolSend();
                this.getVolGet();
            },
            methods:{
                getInfo(){
                    // 发送ajax请求，尝试登录
                    let url = rootUrl+`user/getInfo`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.user = info;
                            console.log(this.user);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                getVolSend(){
                    let url = rootUrl+`vol/getVolSend`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.volSend = info;
                            console.log(this.volSend);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                getVolGet(){
                    let url = rootUrl+`vol/getVolGet`;
                    axios.post(url)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) return;
                            let info = data.data;
                            this.volGet = info;
                            console.log(this.volGet);

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                commitVol(vol){
                    console.log(vol.id);
                    if (vol.state<vol.userNeed&&vol.state!==-1){
                        if(!confirm("人员并未凑齐，是否确认已完成该服务？")){
                            return;
                        }
                    }
                    if (vol.state===-1){
                        this.open3("该服务已经提交过，请务重复提交！");
                        return;
                    }

                    let url = rootUrl+`vol/commitVol`;
                    axios.post(url,vol)
                        .then(response => {
                            let data = response.data;
                            if (data.code !== 0) {
                                this.open4('提交失败');
                                return;
                            }
                            // 修改成功
                            console.log('更新成功：'+data.code);
                            this.open2('更新成功');
                            vol.state = -1;

                        })
                        .catch(error => {
                            alert(error);
                        });
                },
                myFormatDate(value){//处理日期格式
                    let dt = new Date(value);
                    let year = dt.getFullYear();
                    let month = (dt.getMonth() + 1).toString().padStart(2,'0');
                    let date = dt.getDate().toString().padStart(2,'0');
                    let hour = dt.getHours().toString().padStart(2,'0');
                    let minute = dt.getMinutes().toString().padStart(2,'0');
                    let second = dt.getSeconds().toString().padStart(2,'0');
                    return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
                },
                open1(msg) {
                    this.$message({
                        showClose: true,
                        message: msg
                    });
                }, // 提示
                open2(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'success'
                    });
                }, // 成功
                open3(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'warning'
                    });
                }, // 警告
                open4(msg) {
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: 'error'
                    });
                }, // 错误
            }
        })
    </script>
   </body>
</html>